<script setup lang="ts">
import useAppStore from '../../../store/auth'
import useMicroStore from '../../../store/micro'
import { getRouter } from '../../../utils'

defineOptions({ name: 'User' })

const { $t } = useMicroStore()
const router = getRouter()

function onLogout(command: number) {
  if (command === 2) {
    const { deleteToken } = useAppStore()
    deleteToken()

    router.replace({ path: '/login' })
  }
}
</script>

<template>
  <ElDropdown
    style="color:inherit"
    @command="onLogout"
  >
    <div class="flex items-center gap-4px min-w-max">
      <ElAvatar
        :size="30"
        src="https://img1.ttxsapp.com/users/avatars/2021-01-19/1611059298-6eb75-9713c3.jpg"
      />
      <span>五老星</span>
      <i class="i-carbon-chevron-down" />
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem :command="1">
          <i class="i-carbon-user" />
          <span>{{ $t('个人中心') }}</span>
        </ElDropdownItem>

        <ElDropdownItem :command="2">
          <i class="i-carbon-logout" />
          <span>{{ $t('退出登陆') }}</span>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>
